<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d />
<#import '${ctx}/sys/include/body.html' as c />
<#import '${ctx}/sys/include/table/select.html' as select />
<!DOCTYPE html>
<html>
<head>
    <@d.head title="chart" />
    <!--<script src="${ctx}/resource/echart/echarts.js/" type="text/javascript"></script>-->
    <!--<script src="${ctx}/resource/echart/theme/macarons.js"></script>-->

    <script src="${ctx}/resource/antv/g2.js"></script>
    <script src="${ctx}/resource/antv/dataset.js"></script>
    <style>::-webkit-scrollbar {
        display: none;
    }

    html, body {
        overflow: hidden;
        height: 100%;
        margin: 0;
    }</style>
</head>
<@c.body>
<div class="layui-tab layui-tab-brief" lay-filter="graph_config">
    <ul class="layui-tab-title">
        <li>图表展示</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-form">
				<span class="layui-breadcrumb"> <a href="#"><cite>第一级</cite></a>
					<a href="#">第二级</a> <a href="#">第三级</a>
				</span>
                <div class="layui-form-item">
                    <label class="layui-form-label">过滤条件</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"/>
                    </div>
                </div>
                <div id="condition_span">
                    <span class="layui-badge-rim">第一级:产线:Station01s</span>
                    <span class="layui-badge-rim">第二级:生产日期=2019-01</span>
                    <div class="layui-btn-group">
                        <button class="layui-btn layui-btn-primary layui-btn-sm">
                            <i class="layui-icon"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div style="padding-top: 20px">
                <div class="demoTable">
                    搜索ID：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</@c.body>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript">
    layui.use(['table', 'form', 'element', 'appJs'], function () {
        var $ = layui.$;
        var table = layui.table, form = layui.form, element = layui.element, app = layui.appJs;

        var redraw = true;

        element.on('tab(graph_config)', function (data) {
            // console.log(data.index); //得到当前Tab的所在下标
            if (redraw)
                draw();
        });


        form.render();

        //show table
        function draw() {
            $.post('${ctx}/biz/visualize/draw?metrics=count()&dimension=terms(927)&ds_id=19', {
                metrics: 'count()',
                dimension: 'terms(927)',
                ds_id: 19
            }, function (data) {
                if (data.code != 0) {
                    layer.msg(data.code + ":" + data.msg);
                } else {
                    layer.msg(data);
                }
            });
        }

        table.render({
            elem: '#test', url: 'dd', title: '数据表', cols: [[
                // {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}, {
                    field: 'username',
                    title: '用户名',
                    width: 120,
                    edit: 'text'
                }, {
                    field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                        return '<em>' + res.email + '</em>'
                    }
                }, {field: 'sex', title: '性别', width: 80, edit: 'text', sort: true}, {
                    field: 'city',
                    title: '城市',
                    width: 100
                }, {field: 'sign', title: '签名'}, {
                    field: 'experience',
                    title: '积分',
                    width: 80,
                    sort: true
                }, {field: 'ip', title: 'IP', width: 120}, {
                    field: 'logins',
                    title: '登入次数',
                    width: 100,
                    sort: true
                }, {field: 'joinTime', title: '加入时间', width: 120}, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }
            ]], page: true
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });

        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>